<template>
    <el-dialog
        v-model="roleAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="roleDataForm" :rules="roleRules" ref="roleDataFormRef">
                <el-form-item label="角色编码" label-width="20%" prop="roleCode">
                    <el-input v-model="roleDataForm.roleCode" placeholder="角色编码" clearable />
                </el-form-item>
                <el-form-item label="角色名称" label-width="20%" prop="roleName">
                    <el-input v-model="roleDataForm.roleName" placeholder="角色名称" clearable />
                </el-form-item>
                <el-form-item label="角色描述" label-width="20%" prop="roleDescription">
                    <el-input v-model="roleDataForm.roleDescription" placeholder="角色描述" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {roleInfoCreate, roleInfoQuery, roleInfoUpdate} from "@/request/role";
import {ElNotification} from "element-plus";

export default {
    name: "RoleAddOrUpdateDialog",
    props: ['roleDataForm', 'title'],
    data() {
        return {
            roleRules: {
                roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
            },
            saveLoading: false
        }
    },
    computed: {
        roleAddOrUpdateDialogVisible() {
            return this.$store.state.roleAddOrUpdateDialogVisible;
        },
        roleSearchData() {
            return this.$store.state.roleSearchData;
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('changeRoleAddOrUpdateDialogVisible', false)
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['roleDataFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (this.roleDataForm.id === '') {
                        // 添加数据
                        roleInfoCreate(this.roleDataForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                });
                                roleInfoQuery(this.roleSearchData).then(res => {
                                    this.$store.commit('changeRoleDataList', res.data)
                                })
                                this.$store.commit('changeRoleAddOrUpdateDialogVisible', false)
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 修改数据
                        roleInfoUpdate(this.roleDataForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                });
                                roleInfoQuery(this.roleSearchData).then(res => {
                                    this.$store.commit('changeRoleDataList', res.data)
                                })
                                this.$store.commit('changeRoleAddOrUpdateDialogVisible', false)
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped>

</style>